<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是Demo组件</h1>
  <span>当前求和为：{{ sum }}</span><br>
  <button @click="sum++">点我+1</button>
  <button @click="sum--">点我-1</button>
  <hr>
</template>

<script>
// 引入ref 函数
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue";

export default {
  name: 'DemoPage',
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() {
    // 【todo 通过 reactive 封装整个对象的方式来实现数据的响应式】
    let sum = ref(0);

    /**
     * - Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
     *      - beforeCreate===> setup()
     *      - created=======> setup()
     *      - beforeMount ===>onBeforeMount
     *      - mounted=======>onMounted
     *      - beforeUpdate===>onBeforeUpdate
     *      - updated =======>onUpdated
     *      - beforeUnmount ==>onBeforeUnmount
     *      - unmounted =====>onUnmounted
     * 其中，beforeCreate、created没有提供组合式api，其中setup就相当于是beforeCreate、created，这两种方式生命周期钩子。
     */
    // Vue3最大的特点就是组合式api，使用组合式api向setup里面写声明周期钩子。
    // 通过组合式API的形式去使用生命周期钩子。
    onBeforeMount(() => {
      console.log('---Vue3生命周期 1、挂载之前：onBeforeMount---')
    });
    onMounted(() => {
      console.log('---Vue3生命周期 2、挂载完毕：onMounted---')
    });
    onBeforeUpdate(() => {
      console.log('---Vue3生命周期 3、更新之前：onBeforeUpdate---')
    });
    onUpdated(() => {
      console.log('---Vue3生命周期 4、挂载完毕：onUpdated---')
    });
    onBeforeUnmount(() => {
      console.log('---Vue3生命周期 5、卸载之前：onBeforeUnmount---')
    });
    onUnmounted(() => {
      console.log('---Vue3生命周期 6、卸载完毕：onUnmounted---')
    });

    // 方式一：返回对象【常用】
    return {
      sum,
    }
  },
  // // 方式一：通过配置项的形式使用生命周期钩子
  // beforeCreate() {
  //   console.log("=== Vue3生命周期 1、创建之前：beforeCreate ===");
  // },
  // created() {
  //   console.log("=== Vue3生命周期 2、创建完毕：created ===");
  // },
  // beforeMount() {
  //   console.log("=== Vue3生命周期 3、挂载之前：beforeMount ===");
  // },
  // mounted() {
  //   console.log("=== Vue3生命周期 4、挂载完毕：mounted ===");
  // },
  // beforeUpdate() {
  //   console.log("=== Vue3生命周期 5、更新之前：beforeUpdate ===");
  // },
  // updated() {
  //   console.log("=== Vue3生命周期 6、更新完毕：updated ===");
  // },
  // // 其中Vue3里面使用 beforeUnmount 替换了beforeDestroy
  // beforeUnmount() {
  //   console.log("=== Vue3生命周期 7、卸载之前：beforeUnmount ===");
  // },
  // // 其中Vue3里面使用 unmounted 替换了 destroyed
  // unmounted() {
  //   console.log("=== Vue3生命周期 8、卸载完毕：unmounted ===");
  // }
}
</script>

<style>

</style>
